<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>仿新浪博客的右下角弹出窗口</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        body {
            background: #eee;
        }

        .float_layer {
            width: 300px;
            border: 1px solid #aaaaaa;
            display: none;
            background: #fff;
        }

        .float_layer h2 {
            height: 25px;
            line-height: 25px;
            padding-left: 10px;
            font-size: 14px;
            color: #333;
            background: url(http://www.codefans.net/jscss/demoimg/201105/title_bg.gif) repeat-x;
            border-bottom: 1px solid #aaaaaa;
            position: relative;
        }

        .float_layer .min {
            width: 21px;
            height: 20px;
            background: url(http://www.codefans.net/jscss/demoimg/201105/min.gif) no-repeat 0 bottom;
            position: absolute;
            top: 2px;
            right: 25px;
        }

        .float_layer .min:hover {
            background: url(http://www.codefans.net/jscss/demoimg/201105/min.gif) no-repeat 0 0;
        }

        .float_layer .max {
            width: 21px;
            height: 20px;
            background: url(http://www.codefans.net/jscss/demoimg/201105/max.gif) no-repeat 0 bottom;
            position: absolute;
            top: 2px;
            right: 25px;
        }

        .float_layer .max:hover {
            background: url(http://www.codefans.net/jscss/demoimg/201105/max.gif) no-repeat 0 0;
        }

        .float_layer .close {
            width: 21px;
            height: 20px;
            background: url(http://www.codefans.net/jscss/demoimg/201105/close.gif) no-repeat 0 bottom;
            position: absolute;
            top: 2px;
            right: 3px;
        }

        .float_layer .close:hover {
            background: url(http://www.codefans.net/jscss/demoimg/201105/close.gif) no-repeat 0 0;
        }

        .float_layer .content {
            height: 120px;
            overflow: hidden;
            font-size: 14px;
            line-height: 18px;
            color: #666;
            text-indent: 28px;
        }

        .float_layer .wrap {
            padding: 10px;
        }
    </style>
    <script type="text/javascript">
        function miaovAddEvent(oEle, sEventName, fnHandler) {
            if (oEle.attachEvent) {
                oEle.attachEvent('on' + sEventName, fnHandler);
            }
            else {
                oEle.addEventListener(sEventName, fnHandler, false);
            }
        }
        window.onload = function () {
            var oDiv = document.getElementById('miaov_float_layer');
            var oBtnMin = document.getElementById('btn_min');
            var oBtnClose = document.getElementById('btn_close');
            var oDivContent = oDiv.getElementsByTagName('div')[0];

            var iMaxHeight = 0;

            var isIE6 = window.navigator.userAgent.match(/MSIE 6/ig) && !window.navigator.userAgent.match(/MSIE 7|8/ig);

            oDiv.style.display = 'block';
            iMaxHeight = oDivContent.offsetHeight;

            if (isIE6) {
                oDiv.style.position = 'absolute';
                repositionAbsolute();
                miaovAddEvent(window, 'scroll', repositionAbsolute);
                miaovAddEvent(window, 'resize', repositionAbsolute);
            }
            else {
                oDiv.style.position = 'fixed';
                repositionFixed();
                miaovAddEvent(window, 'resize', repositionFixed);
            }

            oBtnMin.timer = null;
            oBtnMin.isMax = true;
            oBtnMin.onclick = function () {
                startMove
                (
                        oDivContent, (this.isMax = !this.isMax) ? iMaxHeight : 0,
                        function () {
                            oBtnMin.className = oBtnMin.className == 'min' ? 'max' : 'min';
                        }
                );
            };

            oBtnClose.onclick = function () {
                oDiv.style.display = 'none';
            };
        };

        function startMove(obj, iTarget, fnCallBackEnd) {
            if (obj.timer) {
                clearInterval(obj.timer);
            }
            obj.timer = setInterval
            (
                    function () {
                        doMove(obj, iTarget, fnCallBackEnd);
                    }, 30
            );
        }

        function doMove(obj, iTarget, fnCallBackEnd) {
            var iSpeed = (iTarget - obj.offsetHeight) / 8;

            if (obj.offsetHeight == iTarget) {
                clearInterval(obj.timer);
                obj.timer = null;
                if (fnCallBackEnd) {
                    fnCallBackEnd();
                }
            }
            else {
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                obj.style.height = obj.offsetHeight + iSpeed + 'px';

                ((window.navigator.userAgent.match(/MSIE 6/ig) && window.navigator.userAgent.match(/MSIE 6/ig).length == 2) ? repositionAbsolute : repositionFixed)()
            }
        }

        function repositionAbsolute() {
            var oDiv = document.getElementById('miaov_float_layer');
            var left = document.body.scrollLeft || document.documentElement.scrollLeft;
            var top = document.body.scrollTop || document.documentElement.scrollTop;
            var width = document.documentElement.clientWidth;
            var height = document.documentElement.clientHeight;

            oDiv.style.left = left + width - oDiv.offsetWidth + 'px';
            oDiv.style.top = top + height - oDiv.offsetHeight + 'px';
        }

        function repositionFixed() {
            var oDiv = document.getElementById('miaov_float_layer');
            var width = document.documentElement.clientWidth;
            var height = document.documentElement.clientHeight;

            oDiv.style.left = width - oDiv.offsetWidth + 'px';
            oDiv.style.top = height - oDiv.offsetHeight + 'px';
        }
    </script>
</head>

<body style="height: 2200px">
<div class="float_layer" id="miaov_float_layer">
    <h2>
        <strong>这是标题</strong>
        <a id="btn_min" href="javascript:;" class="min"></a>
        <a id="btn_close" href="javascript:;" class="close"></a>
    </h2>

    <div class="content">
        <div class="wrap">
            这里放置的是广告信息，你可以填入任何的广告内容，比如像这样：<strong>源码爱好者——带你享受丰富的高质量源码下载体验。</strong>我们的下载地址是：
            <address>北京市-立水桥-奥北中心南区3号楼1单元。</address>
        </div>
    </div>
</div>
</body>
</html>